<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  Vue  -->
    <script src="lib/vue.js"></script>
</head>
<body>
    <div class="one" id="root">
        <p>1-{{str}}</p>
    </div>
    <div class="one" id="app">
        <p>1-{{str}}</p>
    </div>
</body>
<script>
	{
		// 1- {{}}是Vue模板中的插值表达式。可以直接插入数据，也可以插入Vue实例中的属性
		// new Vue({
		// 	// 指定Vue挂载的位置(挂载的元素即是Vue模板)
		// 	el:"#root",
		// 	data:{
		// 		str:"字符串"
		// 	}
		// })
    }
	{
		// el:
        // 1- 直接指定DOM document.querySelector()
        // 2- #id
        // 3- .class
        // 4- 标签
        // 注意：不要将挂载的元素设置为html或body.
		// new Vue({
        //     // el:"#root",
        //     // el:document.querySelector("#root"),
        //     // el:".one",
        //     // el:"div",
        //     // el:"html",
        //     // el:"body",
        //     data:{
		// 		str:"字符串"
        //     }
        // })
    }
	{
		// 同一个页面中可以使用多个vue实例。
		// new Vue({
        //     el:"#root",
        //     data:{
		// 		str:"字符串-root"
        //     }
        // })
		// new Vue({
		// 	el:"#app",
		// 	data:{
		// 		str:"字符串-app"
		// 	}
		// })
    }
	{
		// 如果将同一个元素挂载多次，只有第一次生效。
		// new Vue({
		// 	el:"#root",
		// 	data:{
		// 		str:"字符串-root1"
		// 	}
		// })
		// new Vue({
		// 	el:"#root",
		// 	data:{
		// 		str:"字符串-root2"
		// 	}
		// })
    }

</script>
</html>